<!--  -->
<template>
    <div id='canvaspage'>
      <a-tabs default-active-key="1" class="tabscg">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="bar-chart" />
          图表
        </span>
        <div class="fatherCanvas">
          <div id="main"></div>
          <div id="lines"></div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="table" />
          表格
        </span>
        <h2>热门TOP10</h2>
        <a-table
          bordered
          :columns="columns"
          :row-key="record => record.id"
          :data-source="hotTableList"
        >
        <template slot="img" slot-scope="img">
        <img class="tbimg" :src="img" />
        </template>
        <template slot="update_time" slot-scope="update_time">
          {{moment(update_time).format('YYYY/MM/DD')}}
        </template>
  </a-table>
      </a-tab-pane>
    </a-tabs>
    </div>
 </template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getHotbook } from '@/api/api.js'
import { getTodayHot } from '@/api/webapi.js'
import * as echarts from 'echarts'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px'
  },
  {
    title: '书名',
    dataIndex: 'title',
    width: '200px'
  },
  {
    title: '作者',
    dataIndex: 'authors'
  },
  {
    title: '图片',
    dataIndex: 'img',
    scopedSlots: { customRender: 'img' }
  },
  {
    title: '类型',
    dataIndex: 'type'
  }
]
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      columns,
      show: true,
      hotTableList: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    resizeCanvas () {
      const page = document.getElementById('canvaspage')
      const canvasel = document.getElementById('main')
      const linecanvasel = document.getElementById('lines')
      canvasel.style.width = page.clientWidth / 2 + 'px'
      canvasel.style.height = page.clientHeight * 0.67 + 'px'
      linecanvasel.style.width = page.clientWidth / 2 + 'px'
      linecanvasel.style.height = page.clientHeight * 0.67 + 'px'
      this.myChart.resize()
      this.myChart1.resize()
    },
    async loadTodayCanvas () {
      const tdLabelData = []
      const tdSeriesData = []
      await getTodayHot().then((res) => {
        if (res.code === 200) {
          const list = res.data.list
          for (let i = 0; i < list.length; i++) {
            tdLabelData.push(list[i].title)
            tdSeriesData.push(list[i].click)
          }
        }
      })
      var myChart1 = echarts.init(document.getElementById('lines'))
      myChart1.clear()
      // 绘制图表
      myChart1.setOption({
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 500
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: tdLabelData.length - 1
          }
        ],
        title: {
          text: '当天热门TOP10',
          left: 'center'
        },
        animation: true,
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: tdLabelData,
          axisLabel: {
            rotate: 45,
            // x轴文字的配置
            show: true,
            interval: 0 // 使x轴文字显示全
          }

        },
        yAxis: {},
        series: [
          {
            name: '点击量',
            type: 'line',
            showSymbol: false,
            data: tdSeriesData
          }
        ]
      })
      this.myChart1 = myChart1
      this.resizeCanvas()
    },
    async loadCanvas () {
      const labeldata = []
      const seriesdata = []
      await getHotbook().then((res) => {
        if (res.code === 200) {
          const list = this.hotTableList = res.data.list
          for (let i = 0; i < list.length; i++) {
            labeldata.push(list[i].title)
            seriesdata.push(list[i].click)
          }
        }
      })
      var myChart = echarts.init(document.getElementById('main'))
      myChart.clear()
      // 绘制图表
      myChart.setOption({
        title: {
          text: '热门TOP10',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          data: labeldata,
          axisLabel: {
            rotate: 45,
            // x轴文字的配置
            show: true,
            interval: 0 // 使x轴文字显示全
          }

        },
        animation: true,
        yAxis: {},
        series: [
          {
            name: '点击量',
            type: 'bar',
            barWidth: 15,
            data: seriesdata,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(20,200,212,0.5)' },
                { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                { offset: 1, color: 'rgba(20,200,212,0)' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            }
          }
        ]
      })
      this.myChart = myChart
      this.resizeCanvas()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.loadCanvas()
    this.loadTodayCanvas()
    const that = this
    window.onresize = function () {
      that.resizeCanvas()
    }
  }
}
</script>
 <style lang='less' scoped>
 body,html{
  background: #0f375f;
 }
 #canvaspage{
  width: 100%;
  height: 100%;
 }
 .fatherCanvas{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
 }
  #main{
  }
  .tbimg{
  width: 32px;
  height: 45px;
}
 </style>
